<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ui状态伪类选择器</title>
    <style>
        input:enabled{
            background: red;
        }
        input:focus{
            background: greenyellow;
        }
        input:disabled{
            background: yellow;
        }
        input[type=checkbox]{
            /*去掉默认样式*/
            appearance: none;
            width: 20px;
            height: 20px;
            border: 1px solid black;
        }
        input:checked{
            background: blue;
        }
        div::selection{
            color: red;
            background: yellow;
        }
    </style>
</head>
<body>
    <form action="">
        用户名:<input type="text">
        <br>
        密&emsp;码:<input type="password">
        <br>
        记住用户名:<input type="checkbox">
        <br>
        <input type="submit" value="登录" disabled/>
    </form>

    <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium consectetur saepe, dolorem ad tempora quo. In consectetur quisquam, fuga fugiat debitis repudiandae praesentium expedita sed ducimus assumenda odio. Asperiores, assumenda.
    </div>
</body>
</html>